<template>
    <div>
      <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>登录</span>
        </div>
        <div class="text item" >
        <el-form
          :model="ruleForm" 
          status-icon
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名">
            <el-input type="text" v-model="ruleForm.code"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              type="password"
              v-model="ruleForm.pwd"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
            >登录</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
        </div>
      </el-card>
    
    </div>
</template>

<script>
import {mapState,mapMutations} from "vuex";
export default {
  computed:{

  },
  data() {
    return {
        ruleForm: {
          code: '',
          pwd: '',
        },
    };
  },
  methods: {
    ...mapMutations("user",["setUsers"]),
    async login(){
      var info = await this.ajax.postSubmit("/project/users/login",this.ruleForm);
      if(info.status == 1){
        this.setUsers(info)
        this.$router.push("/listDiscuss");
      }
    },
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.login();
          } else {
            return false;
          }
        });
    },
    resetForm(formName) {
        this.$refs[formName].resetFields();
    }

  }
};
</script>

<style>
.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }
.box-card {
    margin: auto;
    width: 480px;
  }
</style>